<template>
	<view class="my">
		<view class="header">
			<!-- <view class="nickname">{{ nickName }}</view> -->
			<view class="username">
				<text>姓名：</text>
				<text>{{ userName }}</text>
			</view>
			<view class="username">
				<text>性别：</text>
				<!-- <text>{{ sexEnum[sex] }}</text> -->
				<text>男</text>
			</view>
		</view>
		<view class="body">
			<template v-for="(item, index) in tabList" :key="index">
				<view class="item"  @click="itemClick(item)" v-if="item?.type ? item.type === userType : true">
				<img class="icon1" :src="item.icon" />
				<view class="content">{{item.name}}</view>
				<img class="icon" src="/static/images/right-arrow.png" />
			</view>
			</template>
			
		</view>
		<TabBar></TabBar>
	</view>
</template>

<script>
	import TabBar from "/components/tabbar/tabbar.vue";
	import { sexEnum } from "../../enum/user.js"
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				nickName: "",
				userName: "",
				token: "",
				userType: 0,
				sex: 0,
				sexEnum,
				tabList: [
					{
						name: "编辑资料",
						icon: "/static/images/edit.png",
						callback: function() {
							uni.navigateTo({
								url: "/pages/update-info/update-info"
							})
						}
					},
					{
						name: "退出登录",
						icon: "/static/images/logout.png",
						callback: function() {
							uni.clearStorageSync("userInfo")
							uni.clearStorageSync("token")
							uni.reLaunch({
								url: "/pages/login/login"
							})
						}
					}
				]
			};
		},
		created() {
			const userInfo = uni.getStorageSync("userInfo")
			this.userName = userInfo.userName
			this.nickName = userInfo.nickName
			this.sex = userInfo.sex
			this.userType = Number(userInfo.userType)
			this.token = uni.getStorageSync("token")
		},
		methods: {
			itemClick(item) {
				item.callback()
			}
		}
	}
</script>

<style lang="scss" scoped>
.my {
	background-color: #F7F8FA;
	height: 100vh;
	width: 100%;
	
	.header {
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		box-sizing: border-box;
		padding: 30rpx 50rpx;
		
		.nickname {
			font-size: 40rpx;
			font-weight: bold;
		}
		
		.username {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #555;
		}
	}
	
	.body {
		width: 100%;
		height: calc(100% - 220rpx - 120rpx);
		background: #fff;
		margin-top: 20rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		
		.item {
			border-bottom: 1px solid #eee;
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			
			.icon1 {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}	
			.icon {
				width: 20rpx;
				height: 20rpx;
			}
			
			.content {
				flex: 1;
			}
		}
	}
}
</style>
